<template>
  <div class="mine">
    <canvas class="circle" ref="canvas"></canvas>
    <my-card class="user-information" top>
      <mu-flex>
        <mu-flex>
          <mu-flex
            class="header"
            justify-content="between"
            align-items="stretch"
          >
            <mu-flex justify-content="center" align-items="center">
              <mu-avatar :size="48" />
            </mu-flex>
            <mu-flex class="left" direction="column" justify-content="between">
              <h3>菁华如梦</h3>
              <p>阅读3天</p>
            </mu-flex>
          </mu-flex>
        </mu-flex>
      </mu-flex>
    </my-card>
  </div>
</template>

<script>
import MyCard from "@/components/public/MyCard.vue";
import style from "base/global.scss";
export default {
  name: "Mine",
  data() {
    return {
      style,
      width: 100,
    };
  },
  mounted() {
    let width = window.innerWidth;
    const canvas = this.$refs.canvas;
    canvas.setAttribute("width", width);
    canvas.setAttribute("height", width / 4);

    const ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(
      width / 2,
      -width / 16,
      width / 1.5,
      width / 4,
      0,
      Math.PI * 2,
      false
    );

    var grad = ctx.createLinearGradient(0, 0, width, 0);
    grad.addColorStop(0, style.colorDark1); //定义渐变色颜色
    grad.addColorStop(1, style.colorDark3);

    ctx.fillStyle = grad;
    ctx.fill();
  },
  components: {
    MyCard,
  },
};
</script>

<style lang="scss" scoped>
.mine {
  height: 100vh;
  width: 100vw;
  background-color: $color-bg;
  .circle {
    display: block;
    position: absolute;
    top: 0;
    z-index: 0;
  }
  .user-information {
    margin-top: 30px;
    .header {
      height: 55px;
      .left {
        margin-left: $margin3;
        h3 {
          font-size: $text-size-3;
          font-weight: 600;
        }
        p {
          font-size: $text-size-1;
          background-color: $color-bg-light;
          padding: $padding1 $padding3;
          border-radius: $text-size-1;
          color: $color-light3;
        }
      }
    }
  }
}
</style>
